<script setup lang="ts">
import { ref, watch, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { http } from '@/utils/http'
import { useUserStore } from '@/store/user'
import { useCinemaStore } from '@/store/params'
import {useToast, useMessage} from 'wot-design-uni'

const message = useMessage('wd-message-box-slot')
const cinemaStore = useCinemaStore()
const userStore = useUserStore()
const { success: showSuccess, error: showError } = useToast()

// 定义响应式的导航栏标题
const navTitle = ref('待结算') 
const settlementInfo = ref(cinemaStore.cinemaInfo.settlementInfo)
const loading = ref(false)
const discountList = ref([])
const vipList = ref([])


onLoad((options) => {
  navTitle.value = cinemaStore.cinemaInfo.cinemaName
})

const getGoodsData = (status) => {
  
}

const onChange = (event) => {
  getGoodsData(event.index)
}

const onBuy = (status) => {
  if (status === 1) {
    // 想看
  } else {
    // 购买
    uni.navigateTo({
      url: '/pages-home/ticketPurchaseDetails'
    })

  }
}

const handleChange = () => {

}

const getDiscountList = () => {
  loading.value = true
  const params = {
    memberCode: userStore.userInfo.memberCode
  }
  http.post('/movieSystem/member/getMemberCouponList', params).then((res: any) => {
    if (res.success) {
      discountList.value = res.data.list
    } else {
      showError({
        msg: res.message
      })
    }
  }).finally(() => {
      loading.value = false
  })
}
const getVipList = () => {
  loading.value = true
  const params = {
    cardType: ''
  }
  http.post('/movieSystem/card/getCardList', params).then((res: any) => {
    if (res.success) {
      vipList.value = res.data.list
    } else {
      showError({
        msg: res.message
      })
    }
  }).finally(() => {
      loading.value = false
  })
}

const submitOrder = () => {
  message
    .confirm({
      msg: '',
      title: cinemaStore.cinemaInfo.cinemaName
    })
    .then(() => {
      console.log('点击了确定按钮')
    })
    .catch(() => {
      console.log('点击了取消按钮')
    })
}

onMounted(() => {
  getGoodsData()
  getDiscountList()
  getVipList()
})
</script>

<template>
  <PageLayout :navbarShow="true" navLeftText="" backRoutePath="pages/secondTab" :navLeftArrow="true" :navTitle="navTitle">
    <view class="p-2">
      <view class="flex">
        <view class="mr-2">
          <wd-img :src="settlementInfo.goodsPic" width="60" height="60"></wd-img>
        </view>
        <view class="flex-1">
          <view class="title mb-2">{{ settlementInfo.goodsName }}</view>
          <view class="flex justify-between">
            <view class="red">¥ {{settlementInfo.goodsPrice}}</view>
          <view>{{settlementInfo.number}}</view>
          </view>
        </view>
    </view>

    <view>
        <wd-picker :columns="columns" label="优惠券" :placeholder="discountList.length ? '请选择优惠券' : '暂无可选'" v-model="discountValue" @confirm="handleConfirm" />
        <wd-picker :columns="columns" label="会员卡" :placeholder="vipList.length ? '请选择会员卡' : '暂无可选'" v-model="vipValue" @confirm="handleConfirm" />
        <wd-input type="text" v-model="phone" placeholder="请输入手机号" label="购票手机号" @change="handleChange" />
    </view>

    <view class="flex justify-end mt-2 mb-2">
        <view class="mr-1">需支付</view>
        <view class="ml-2 bold red">
            ¥ {{settlementInfo.goodsPrice * settlementInfo.number}}
        </view>
    </view>

    <wd-message-box selector="wd-message-box-slot">
        <view class="ml-2 bold red">
            ¥ {{settlementInfo.goodsPrice * settlementInfo.number}}
        </view>
    </wd-message-box>
    <wd-button type="warning" block @click="submitOrder">提交订单</wd-button>
    
  </view>

  </PageLayout>
</template>

<style>
.red {
    color: red;
}
</style>

<route type="page" lang="json5">
  {

    "style": {
      navigationStyle: 'custom',
      navigationBarTitleText: '',
    }
  }
</route>
